import React, { Component } from "react";
import headercss from "./index.module.css";
import axiox from "axios"

export default class Header extends Component {
  // 声明ref绑定input框
  inputEle = React.createRef()
  // 搜索
  searchUsers = () => {
    // 获取输入框的值
    const nameVal = this.inputEle.current.value
    if (!nameVal) {
      alert('姓名不允许为空')
      return
    }
    // 发送请求
    axiox.get(`/api1/search/users?q=${nameVal}`).then(res => {
      console.log(res.data);
      // 调用父组件的方法传递参数
      this.props.setStateUsers(res.data.items)
    })
  };

  render() {
    return (
      <div className={headercss.main}>
        <div className={headercss.searchbox}>
          <h3>Search Gitee Users</h3>
          <div className={headercss.inputbox}>
            <input ref={this.inputEle} type="text" placeholder="请搜索" />
            <button onClick={this.searchUsers}>点击搜索</button>
          </div>
        </div>
      </div>
    );
  }
}
